<template>
  <div
          class="box"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10"
  >
    <ul>
      <li v-for="item in list" :key="item.filmId">
        <img :src="item.poster" alt />
        <div class="list-center">
          <h4>
            {{item.name}}
            <span class="span1">{{item.item.name}}</span>
          </h4>
          <p>
            {{item.grade?'观众评分':''}}
            <span class="span2">{{item.grade}}</span>
          </p>
          <p>
            主演:
            <span v-for="(i,index) in item.actors" :key="index" class="span3">{{i.name}}</span>
          </p>
          <p v-if="type==='1'">{{item.nation+'|'+item.runtime+'分钟'}}</p>
          <p v-else>{{item.premiereAt|formatTime }}</p>
        </div>
        <button v-show="item.isPresale">{{type==="1"? "购票":"预售"}}</button>
      </li>
    </ul>
  </div>
</template>

<script>
  import { InfiniteScroll } from "mint-ui";
  import { Toast } from "mint-ui";
  export default {
    data() {
      return {
        type: "",
        list: [],
        loading: false,
        page: 1
      };
    },
    mounted() {
      console.log(this.$route.path)
      if (this.$route.path === '/city') {
        $('.navBar').hide()
      }
      else {
        $('.navBar').show()
      }
    },
    created(){
      var s = new Date()
      // console.dir(s)
    },
    watch: {
      $route: {
        handler(n) {
          this.type = n.params.type;
          this.page = 1;
          this.list = [];
          this.getData();
        },
        deep: true,
        immediate: true
      }
    },
    filters:{
      formatTime(a){
        console.log(a)
        var s = new Date(a*1000)
        return "上映时间 :" + s.getFullYear()+"年"+(s.getMonth()+1)+"月"+s.getDate()+'日'+ "星期"+ (s.getDay()===0?"天":s.getDay())
      }
    },
    methods: {
      loadMore() {
        console.log(123);
        this.getData();
      },
      getData() {
        if (this.page > 6) {
          Toast({
            message: "已经到底了！",
            position: "bottom",
            duration: 2000
          });
          return;
        }
        this.loading = true;
        this.$axios
                .get("/gateway", {
                  params: {
                    cityId: 110100,
                    pageNum: this.page,
                    pageSize: 10,
                    type: this.type,
                    k: new Date().getTime()
                  },
                  headers: {
                    "X-Client-Info": `{"a":"3000","ch":"1002","v":"5.0.4","e":"15649873852594160246936"}`,
                    "X-Host": " mall.film-ticket.film.list"
                  }
                })
                .then(resp => {
                  // console.log(resp);
                  this.list = this.list.concat(resp.data.data.films);
                  this.page++;
                  this.loading = false;
                });
      }
    }
  };
</script>

<style scoped lang="scss">
  .box {
    // min-height: 14.43rem;
    width: 100%;
    position: fixed;
    top: 1.9rem;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 0.98rem;
    overflow: auto;
    ul {
      margin-left: 0.3rem;
      li {
        display: flex;
        box-sizing: border-box;
        width: 7.2rem;
        height: 2.48rem;
        padding: 0.3rem 0.3rem 0.3rem 0;
        border-bottom: 0.02rem solid #eee;
        button {
          margin-top: 0.65rem;
          line-height: 0.5rem;
          height: 0.5rem;
          width: 1rem;
          color: #ff5f16;
          font-size: 0.26rem;
          text-align: center;
          border-radius: 0.04rem;
          background-color: #fff;
          border: 0.02rem solid #ff5f16;
        }
        img {
          width: 1.32rem;
          height: 1.8162rem;
        }
        .list-center {
          width: 4.58rem;
          height: 1.62rem;
          font-size: 0.26rem;
          box-sizing: border-box;
          padding: 0 0.2rem;
          line-height: 0.4rem;
          p {
            font-size: 0.27rem;
            width: 4.18rem;
            height: 0.4rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #444;
          }
          p:nth-child(2) .span2 {
            color: #ffb232;
          }
          p:nth-child(3) .span3 {
            margin: 0 0.03rem;
          }
          h4 {
            font-size: 0.35rem;
            margin-top: 0.1rem;
            color: black;
            font-weight: 600;
            .span1 {
              display: inline-block;
              box-sizing: border-box;
              height: 0.28rem;
              width: 0.4rem;
              background-color: #d2d6dc;
              color: #fff;
              font-size: 0.18rem;
              line-height: 0.28rem;
              padding: 0 0.04rem;
              border-radius: 0.04rem;
              font-weight: 300;
              margin-left: 0.1rem;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>